import React, { Component } from "react";
import * as echarts from 'echarts';
class MatrixTree extends Component{
    constructor(props){
        super(props);
        this.state = {
            chartData:props.chartData,
            that: props.that,
            zsytest:props.test
        };
    }
   
    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }
    
    componentDidMount(){
        this.drawChart()
       
    }
    drawChart(){
       
        // console.log("3333"+this.props.chartData);
        // console.log("===---=="+this.state.chartData[0].children);
        // console.log("-=-=-"+this.state.zsytest);
        
        var structColors = [
            '#ed6f6d', '#f3765d', '#f77a57', '#f98866', '#f99579',
            '#ff9f3b', '#f0a732', '#e6a840', '#e9b253', '#ebbb66',
            '#78b7e8', '#59b1f3', '#66bbf5', '#6ec3f2', '#75cae2',
            '#70cccc', '#5dc4c4', '#4dbebd', '#4cc1a7', '#4fca96',
            '#4cc686'
            // '#4169e1', '#1e90ff', '#6495ed', '#00bfff', '#87cefa',
            // '#00ced1', '#48d1cc', '#40e0d0',
        ];
        var RICH = {
            name: {
                color: '#fff',
                fontSize: 20
            },
            basic: {
                color: '#fff',
                fontSize: 8,
                lineHeight: 16
        
            }
        };
        
        var structsDatas = [];
        // var formatUtil = echarts.format;
        
        function formatStructData(children, structsDatas) {
            // 添加每个单位的颜色
            for (var prop in children) {
                var index = Math.floor(Math.random() * 20);
                var value = 1;
                if (children[prop].value !== 0) {
                    value = children[prop].value;
                }
                var tmp = {
                    itemStyle: {
                        normal: {
                            color: structColors[index]
                        }
                    },
                    name: children[prop].name,
                    children: [],
                    value: children[prop].value
                }
                formatStructData(children[prop].children, tmp.children);
                if (tmp.children.length === 0) {
                    delete tmp.children;
                }
                structsDatas.push(tmp);
                // return structs_datas;
        
            }
        
        }
        
        // function showMenu(param) {
        //     // 可在此处添加右击操作内容
        //     console.log('showMenu==============', param);
        //     var event = param.event;
        //     var pageX = event.offsetX;
        //     var pageY = event.offsetY;
        //     console.log('showMenu========', pageX, pageY);
        
        // }
        formatStructData(this.state.chartData[0].children, structsDatas);
        if(JSON.stringify(this.state.chartData) != '[]') {
        let chart =echarts.init(document.getElementById('treeChart'));
        var option = {
            // title: {
            //     text: '树图构建组织结构',
            //     subtext: '2020-02-19',
            //     left: 'leafDepth'
            // },
            tooltip: {
        
                formatter: function(info) {
                    // console.log('tool------', info);
                    var val = info.data.value;
                    var name = info.name;
                    return [
                        '<h4>' + name + '</>',
                        
                    ].join('\n');
                    // return [
                    //     '{name|' + name + '}',
                    //     '{basic| 资产数量：' + asset_num + '}',
                    // ].join('\n');
                },
                // rich: RICH, tooltip不支持富文本
        
            },
        
            series: [{
                
                type: 'treemap',
                left:'1%',
                top:'1%',
                visibleMin: 1,
                // data: format_struct_data(info2.children, structs_datas),
                data: structsDatas,
                leafDepth: 1,
                label: {
                    
                    normal: {
                        
                        show: true,
                        position: ['10%', '40%'],
                        formatter: function(a) {
                            console.log('formatter==label=======', a);
                            return '{Name|' + a.name + '}' + "\n\n"  ;
                            // return [
                            //     '<div><h1>' + a.name + '</h1></div>',
                            //     '<div><p>' + a.value + '</></div>',
                            // ].join('');
                        },
                        textStyle: {
                            // color: '',  label的字体颜色
                            fontSize: '18',
                            fontWeight: 'bold'
                        },
                        rich: RICH,
        
                    },
                    // emphasis: {
                    //     show: true,
                    //     position: 'insideTopLeft',
                    //     formatter: function(a) {
                    //         console.log('formatter===label======', a);
                    //         return a.name + "\n\n" + "资产数量 : " + a.data.value + "\n等级得分";
                    //     },
                    //     textStyle: {
                    //         fontSize: '14',
                    //         fontWeight: 'bold'
                    //     }
                    // }
                },
                levels: [{
                    itemStyle: {
                        normal: {
                            borderWidth: 0,
                            gapWidth: 2
                        }
                    }
                }, {
                    itemStyle: {
                        normal: {
                            gapWidth: 2
                        }
                    }
                }, {
                    // colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        normal: {
                            gapWidth: 2,
                            // borderColorSaturation: 0.6
                        }
                    }
                }],
                breadcrumb: {
                    show: true,
                    // "height": 22,
                    left: "1%",
                    top: "82%",
                    emptyItemWidth: 25,
                    itemStyle: {
                        normal: {
                            color: "#fff",
                            borderColor: "rgba(255,255,255,0.7)",
                            borderWidth: 1,
                            shadowColor: "rgba(150,150,150,1)",
                            shadowBlur: 3,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            textStyle: {
                                color: "#000",
                                fontWeight: 'bold'
                            }
                        },
                        emphasis: {
                            textStyle: {}
                        }
                    }
                },
            }]
        }
        chart.setOption(option)
        
        // document.oncontextmenu = function() {
        //     return false;
        // };
        // chart.on('contextmenu', showMenu);
        window.onresize = chart.resize;
     }
    }
    render() {
        let chartStyle = {
            height: '110%',
            width: '120%',
        };
        return (<div id='treeChart' style={chartStyle} />)
    }
}
export { MatrixTree }